<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="检查类型">
              <a-select placeholder="请输检查类型" v-decorator="['checkCategories', {}]">
                <a-select-option
                  v-for="letter in dataSourcetype"
                  :key="letter"
                  :value="`${letter.num}`"
                >{{letter.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="分类名称">
              <a-input placeholder="请输入分类名称" v-decorator="['typeName', {}]" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="检查检验子表" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="knoIiAttTable.loading"
            :columns="knoIiAttTable.columns"
            :dataSource="knoIiAttTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from 'moment'
import pick from 'lodash.pick'
import { FormTypes } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'

export default {
  name: 'KnoIiOwnerModal',
  mixins: [JEditableTableMixin],
  data() {
    return {
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {},
      refKeys: ['knoIiAtt'],
      activeKey: 'knoIiAtt',
      dataSourcetype:[{name:'化学检查',num:'1'},{name:'物理检查',num:'2'}],
      // 检查检验子表
      knoIiAttTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '检查名称',
            key: 'inspectName',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: '标本',
            key: 'specimen',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: '参考值',
            key: 'referenceValue',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: '临床意义',
            key: 'clinicalPurport',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: '注意事项',
            key: 'carefulMatter',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
        ]
      },
      url: {
        add: '/knowledge/knoIiOwner/add',
        edit: '/knowledge/knoIiOwner/edit',
        knoIiAtt: {
          list: '/knowledge/knoIiOwner/queryKnoIiAttByMainId'
        }
      }
    }
  },
  methods: {
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'checkCategories', 'typeName'))
        // 时间格式化
        this.form.setFieldsValue({ opeDate: this.model.opeDate ? moment(this.model.opeDate) : null })
      })
      // 加载子表数据
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.knoIiAtt.list, params, this.knoIiAttTable)
      }
    },

    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)
      //时间格式化
      main.opeDate = main.opeDate ? main.opeDate.format('YYYY-MM-DD HH:mm:ss') : null
      return {
        ...main, // 展开
        knoIiAttList: allValues.tablesValue[0].values
      }
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/zkxhadd.less';

/deep/ .ant-tabs-nav .ant-tabs-tab {
  color: #38c3c8;
}
/deep/ .ant-tabs-nav .ant-tabs-tab:hover {
  color: #38c3c8;
}
/deep/ .ant-tabs-ink-bar {
  background-color: #38c3c8;
  height: 2px;
}
/deep/ .input-table .tbody .td input[data-v-2f0c1ef1]:hover {
  border-color: #38c3c8;
}
</style>